<template>
  <div class="popup-selector" :style="cssStyle" v-if="visible">
    <div
      class="option-item"
      v-for="(item,index) in optionList"
      :key="index"
      @click.stop="clickOption(index)"
      :class="{active:activeIndex===index}"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  name: "",
  props: {
    activeIndex: {
      type: Number,
      default: -1
    },
    optionList: {
      type: Array,
      default: []
    },
    cssStyle: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  computed: {
  },
  mounted() {

  },
  methods: {
    clickOption(index){
      this.$emit('clickOption',index)
    },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.popup-selector {
  position: absolute;
  width: 116px;
  padding: 4px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),0px 3px 6px -4px rgba(0, 0, 0, 0.12),0px 9px 28px 8px rgba(0, 0, 0, 0.05);
  z-index: 99999;
  .option-item {
    width: 100%;
    padding-left: 12px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: @textColor;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      background-color: rgba(0,0,0,0.06);
    }
    &.active {
      background-color: #fff0e5 !important;
    }
  }
}
</style>
